<template>
  <div class="little-skills-w">
    <div class="skills">
      <div class="skill" :class="skill.lv" v-for="(skill, index) in list" :key="index">
        {{ skill.title }}
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'SkillB',
  props: ['item'],
  computed: {
    list() {
      const list = this.item.list || []
      return list.map(li => {
        const a = {}
        a.lv = li[0]
        a.title = li.substring(1)

        return a
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import "src/assets/common.scss";

.little-skills-w {


  .skills {
    display: flex;
    flex-flow: row wrap;

    padding: 0 20px;

    .skill {
      position: relative;
      box-sizing: border-box;
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      max-width: 150px;
      height: 25px;
      text-align: center;
      margin: 3px 4px;

      font-size: 12px;

      &.o {
        flex-grow: 0;
        width: 25px;
      }

      &:after {
        position: absolute;
        top: 0;
        height: 4px;
        width: 15px;
        border-radius: 5px;
        content: "";
        background: black;
      }
    }

    .a {
      color: rgb($c2, 1);

      &:after {
        background: rgb($c1, 1);
      }
    }

    .b {
      color: rgb($c2, .8);

      &:after {
        background: rgb($c1, 0.8);
      }
    }

    .c {
      color: rgb($c2, .7);

      &:after {
        background: rgb($c1, 0.5);
      }
    }

  }
}
</style>
